<template>
	<view class="pagesWhite">
		<view class="header_bar">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">{{ userInfo.isPayPwd== 2 ? '修改交易密码' : '设置交易密码' }}</view>
			</view> 
		</view> 
		<view class="operateBox-tabs">
			<view class="operateBox-flex">
				<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" src="../../static/operate/password.png" mode=""></image>
					</view>
				<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 3, showCloseBtn: new_password != '' }">
					<input placeholder="请输入交易密码" placeholder-class="inputStyle" v-model="new_password"
					:password="!eyeShowHideArray[3].show"
					@input="onInputNum(3)"
					@blur="blurInput(3)"
					@focus="focusInput(3)"/>
					<view class="operateBox-formBox-list-image">
						<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('new_password')">
							<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
						</view>
						<view class="operateBox-formBox-list-image__see" @click="toggleEyeStatus(3)">
							<image :src="eyeShowHideArray[3].show ? eyeShow : eyeHide" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="operateBox-formBox">
				<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" src="../../static/operate/password.png" mode=""></image>
					</view>
				<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 4, showCloseBtn: re_password != '' }">
					<input :placeholder="type == 2 ? '请再次确认密码' : '请再次确认密码'" placeholder-class="inputStyle" v-model="re_password"
					:password="!eyeShowHideArray[4].show"
					@input="onInputNum(4)"
					@blur="blurInput(4)"
					@focus="focusInput(4)"/>
					<view class="operateBox-formBox-list-image">
						<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('re_password')">
							<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
						</view>
						<view class="operateBox-formBox-list-image__see" @click="toggleEyeStatus(4)">
							<image :src="eyeShowHideArray[4].show ? eyeShow : eyeHide" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="operateBox-formBox">
				<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" src="../../static/operate/icon-code.png" mode=""></image>
					</view>
				<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: code != '' }">
					<input type="number" placeholder="请输入验证码" v-model="code" placeholder-class="inputStyle"
					@blur="blurInput(1)"
					@focus="focusInput(1)"/>
					<view class="operateBox-formBox-list-image">
						<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('code')">
							<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
						</view>
						<view class="operateBox-formBox-list-image__code" @click="sendCode()">
							<text class="code">{{ remain }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="initBtn" @tap.stop="$u.throttle(confirm,1000)">确定</view>
	</view>
</template>

<script>
	import md5 from '../../common/js/md5.js';
	export default {
		data() {
			return {
				phone: '',
				code: '',
				password: '',
				new_password: '',
				re_password: '',
				pickerShow: false,
				zoneList: [],
				// 验证码
				remain: '发送验证码',
				isSend: true,
				time: 60,
				timer: null,
				index: 0,
				isFocus: null,
				eyeShow: '../../static/public/icon-eye-open.png',
				eyeHide: '../../static/public/icon-eye-close.png',
				eyeShowHideArray: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
				userInfo: {},
				type: '',
			}
		},
		onLoad(options) {
			// 1未设置 ，2已设置
			this.type = options.value1;
			console.log("type:",this.type);
		},
		async onShow() {
			this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			init(){
				this.getUserInfo();
			},
			confirm(){
				// if (this.password == '' ) {
				// 	return this.$tools.toast(this.type == 2 ? this.$t('setPayPsd') : this.$t('oldPassword'));
				// }
				if (this.new_password == ''){
					return this.$tools.toast('请输入交易密码');
				}
				var reg = /^\d{6}$/;
				if(!reg.test(this.new_password)){
					return this.$tools.toast('请输入6位数字交易密码');
				}
				// var reg = /^(?![0-7]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
				// if(!reg.test(this.new_password)){
				// 	return this.$tools.toast('请输入6-12位字母+数字的交易密码');
				// }
				if (this.re_password == ''){
					return this.$tools.toast(this.type == 2 ? '请再次输入交易密码' : '请再次输入新密码');
				}
				if (this.new_password != this.re_password){
					return this.$tools.toast('两者密码不一致');
				}
				if (this.code == ''){
					return this.$tools.toast('请输入验证码');
				}
				var data = {};
				data['twoPwd'] =  this.$md5(this.re_password);
				data['newPwd'] =  this.$md5(this.new_password);
				data['type'] =  2;
				data['code'] =  this.code;
				data['codeType'] = 1;
				console.log("data：",data);
				this.$Ajax('/api/user/updatePwd',
				data,
				res => {
						this.$tools.toastBack(res.msg,1);
					},err => {
						
					}
				)
			},
			sendCode() {
				if(this.isSend == true){
					uni.showLoading({
						title: '发送中',
						mask: true
					});
					var data = {};
					this.phone = this.userInfo.regAddress;
					data['account'] = this.phone;
					data['type'] = 5;
					console.log("data：",data);
					this.$Ajax('/api/user/sendCode',
					data,
					res => {
							this.isSend = false;
							this.remain = this.time + 's';
							this.timer = setInterval(() => {
								this.time--;
								this.remain = this.time + 's';
								if (this.time == 0) {
									clearInterval(this.timer);
									this.remain = '重新获取';
									(this.isSend = true), (this.time = 60);
								}
							}, 1000);
						}
					)
					uni.hideLoading();
				}
			},
			// 只能输入数字
			onInputNum(index) {
				// 获取输入框的值
				let value = index==3?this.new_password : this.re_password
				let reg=new RegExp("^[0-9]*$")
				let result=''
				// console.log('value',value)
				for (let i=0;i<value.length;i++){
					if(reg.test(value.charAt(i))) {
						result+=value.charAt(i) 
					}
				}
				// console.log('result',result)
				this.$nextTick(()=>{
					if(index==3){
						this.new_password = result
						this.$set(this,'new_password',result)
					}else{
						this.re_password = result
						this.$set(this,'re_password',result)
					}
					
					// console.log('pay_password',this.pay_password)
				})
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			toggleEyeStatus(index) {
				this.eyeShowHideArray[index].show = !this.eyeShowHideArray[index].show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/operate/register';
	.initBtn{
		margin: 68rpx 34rpx 0;
		width: calc(100% - 68rpx);
	}
	.operateBox-tabs{
		margin: 0 50rpx;
	}
</style>
